React = require('react')
Card = require('antd-mobile/lib/card')
# ListView = require('antd-mobile/lib/list-view')
Flex = require('antd-mobile/lib/flex')
Icon = require('antd-mobile/lib/icon')
Toast = require('antd-mobile/lib/toast')
RefreshControl = require('antd-mobile/lib/refresh-control')
TopNotice = require('antd-mobile/lib/notice-bar')
{StyleSheet,InteractionManager,View,Image,Text,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,ActivityIndicator,TouchableOpacity} = require('react-native')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')
{View} = require('react-native')
{fetchGetList,fetchRefreshList} = require('../actions/page_planDetail.js')
{connect} = require('react-redux')
_ = require('underscore')
moment = require('moment')
backImg = require('../img/back.png')
renderAfterTransfer = require('../highOrderComponent/renderAfterTransfer.js')
Pilot = require('../components/pilot.js')


# InAttempDesc = React.createClass
class OutDesc extends React.Component
  componentDidMount:->
      if @props.connected
        @props.fetchRefresh(@props.id)

  _processTime:(time)->
    t = moment(time)
    if t.isValid()
      t.format('DD/HHmm')
    else
      ""
  renderHeader:->
    model = @props.modelList[@props.id]?.model ? {}
    <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
      <View style={{flex:1,padding:10}}>
        <TouchableOpacity onPress={=>@props.navigator.pop()}>
          <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
        </TouchableOpacity>
      </View>
      <View style={{flex:3,justifyContent:'center',alignItems:'center'}}>
        <Text style={{fontSize:20,color:'#ffffff'}}>{model.VCVESCNAME}</Text>
      </View>
      <View style={{flex:1,alignItems:'flex-end',padding:10}}>
      </View>
    </View>

  renderBody:->
    debugger
    if @props.connected is false and @props.modelList[@props.id]
      isCache = true
    else
      isCache = false
    model = @props.modelList[@props.id]?.model ? {}
    pList = @props.pilotList[@props.id] ? []
    <ScrollView style={{backgroundColor:'#fffff0',height:height-80}}
      refreshControl={
        <RefreshControl refreshing={@props.refreshing} onRefresh={@props.fetchRefresh.bind(@,@props.id)}
            distanceToRefresh={60}
            resistance={2.5}
            hammerOptions={{
              touchAction:'auto'
              recognizers:
                pan:
                  threshold:10
              }}/>
      }>
      {
        if @props.isLoading
          <View>
            <ActivityIndicator animating={@props.isLoading} size='large'/>
          </View>
      }
      {
        if isCache
          <TopNotice mode="closable" style={{margin:10}}>
            无网络连接，您现在看到的是离线缓存数据
          </TopNotice>
      }
      <View style={[styles.card,{marginTop:10}]}>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.textContent}>{"#{model.VCVESCNAME}         #{model.VCVESENAME}"}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>呼号</Text>
            <Text style={styles.textContent}>{model.CHCALLNO}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>船籍</Text>
            <Text style={styles.textContent}>{model.CHNATIONNAME}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>船类型</Text>
            <Text style={styles.textContent}>{model.CHVESTYPENAME}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>船代</Text>
            <Text style={styles.textContent}>{model.CHVESAGENTNAME}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>船长</Text>
            <Text style={styles.textContent}>{model.NMVESLENGTH}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>船宽</Text>
            <Text style={styles.textContent}>{model.NMVESWIDTH}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>载重吨</Text>
            <Text style={styles.textContent}>{model.INSUMMERWEIGHTTON}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>起始港</Text>
            <Text style={styles.textContent}>{model.CHENDPORTNAME}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>下一港</Text>
            <Text style={styles.textContent}>{model.CHNEXTPORTNAME}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>吃水</Text>
            <Text style={styles.textContent}>{"#{model.CHSEAWATER} #{model.NMFRONTGUAGE}/#{model.NMBACKGUAGE}"}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>泊位水深</Text>
            <Text style={styles.textContent}>{model.NMWATERLEN}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>离泊泊位</Text>
            <Text style={styles.textContent}>{model.CHBERTHSIGNNAME}</Text>
          </View>
        </View>
        <View style={styles.lastRow}>
          <View style={styles.cell}>
            <Text style={styles.text}>离泊时间</Text>
            <Text style={styles.textContent}>{@_processTime model.SDLEAVETIMEPILOTAGE}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>离泊状态</Text>
            <Text style={styles.textContent}>{model.CHBERTHWAYNAME}</Text>
          </View>
        </View>
      </View>
      <View style={styles.card}>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={[styles.text,{flex:1}]}>完货时间</Text>
            <Text style={[styles.textContent,{flex:3}]}>{@_processTime model.SDLEAVETIMECONFIRMED}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={[styles.text,{flex:1}]}>掉头时间</Text>
            <Text style={[styles.textContent,{flex:3}]}>{"#{@_processTime model.DTTURNTIME}~#{@_processTime model.DTTURNENDTIME}"}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>掉头地点</Text>
            <Text style={styles.textContent}>{model.CHTURNPLACENAME}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>拖轮类别</Text>
            <Text style={styles.textContent}>{model.CHDRAGVESCLASSNAME}</Text>
          </View>
        </View>
        <View style={styles.lastRow}>
          <View style={styles.cell}>
            <Text style={styles.text}>拖轮时间</Text>
            <Text style={styles.textContent}>{@_processTime(model.DTDRAGVESTIME)}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>拖轮方式</Text>
            <Text style={styles.textContent}>{model.CHDRAGVESPLACENAME}</Text>
          </View>
        </View>
      </View>
      <View style={styles.card}>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>结束地点</Text>
            <Text style={styles.textContent}>{model.CHAPPOINTPLACENAME}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>接送工具</Text>
            <Text style={styles.textContent}>{model.CHTOOLNAME}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>进北槽时间</Text>
            <Text style={styles.textContent}>{@_processTime(model.DTINBCTIME)}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={[styles.text,{width:40}]}>北槽批复时间</Text>
            <Text style={styles.textContent}>{@_processTime model.DTBCCORRECT}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>在航</Text>
            <Text style={styles.textContent}>{if model.CHISSAILING is '1' then '是' else ''}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>接送</Text>
            <Text style={styles.textContent}>{if model.CHPORTPILOTFLAG is '1' then '是' else ''}</Text>
          </View>
        </View>
        <View style={styles.lastRow}>
          <View style={styles.cell}>
            <Text style={styles.text}>引</Text>
            <Text style={styles.textContent}>{model.CHSINGLEPILOTFLAGNAME}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>一级危险品</Text>
            <Text style={styles.textContent}>{if model.CHONESTAKEFLAG is '1' then '是' else '否'}</Text>
          </View>
        </View>
      </View>
      <View style={styles.card}>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>接送方式</Text>
            <Text style={styles.textContent}>{model.CHDRAGSHCLASSNAME}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>接送时间</Text>
            <Text style={styles.textContent}>{@_processTime model.DTDRAGSHTIME}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>接送地点</Text>
            <Text style={styles.textContent}>{model.CHDRAGSHPLACENAME}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>上船时间</Text>
            <Text style={styles.textContent}>{@_processTime model.DTONVESTIME}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>下船时间</Text>
            <Text style={styles.textContent}>{@_processTime model.DTOFFVESTIME}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={[styles.text,{width:60}]}>航道交接</Text>
            <Text style={styles.textContent}>{if model.CHHANDOVER is '1' then '是' else ''}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>交接地点</Text>
            <Text style={styles.textContent}>{model.CHHANDOVERPLACENAME}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>艏驾驶</Text>
            <Text style={styles.textContent}>{if model.CHDRIVERPLACEFLAG is 'F' then '是' else ''}</Text>
          </View>
        </View>
        <View style={styles.row}>
          <View style={styles.cell}>
            <Text style={styles.text}>水上高度</Text>
            <Text style={styles.textContent}>{model.NMOVERWATERHIGH}</Text>
          </View>
          <View style={styles.cell}>
            <Text style={styles.text}>过桥信息</Text>
            <Text style={styles.textContent}>{model.VCBRIDGEINFO}</Text>
          </View>
        </View>
        <View style={styles.lastRow}>
          <View style={styles.cell}>
            <Text style={[styles.text,{flex:1}]}>备注</Text>
            <Text style={[styles.textContent,{flex:3}]}>{model.VCMEMO}</Text>
          </View>
        </View>
      </View>
      {
        if @props.userInfo.pilotCode not in ['guest','',null] and pList?.length>0
          pilotContent = [<View key='1' style={[styles.row,marginBottom:10, backgroundColor:'#0066FF']}>
                            <View style={styles.cell}>
                              <Text style={{color:'#ffffff'}}>引航员信息</Text>
                            </View>
                          </View>]
          for item in pList
            pilotContent.push <Pilot key={item.VCPILOTNAME} item={item} />
          pilotContent
        }
    </ScrollView>
  render:->
    <View style={width:width,height:height,flexDirection:'column',backgroundColor:'#ffffff',paddingBottom:20}>
      {
        @renderHeader()
      }
      {
        @renderBody()
      }
    </View>
    # <View style={width:width,height:height,flexDirection:'column'}>
    #
    #
    #
    # </View>

styles = StyleSheet.create
  card:
    borderRadius:10
    borderWidth:1
    borderStyle:'solid'
    borderColor:'#CCCCCC'
    flexDirection:'column'
    backgroundColor:'#ffffff'
    marginLeft:5
    marginRight:5
    marginBottom:10
  row:
    flexDirection:'row'
    borderBottomWidth:0.5
    borderStyle:'solid'
    borderBottomColor:'#CCCCCC'
    backgroundColor:'#ffffff'
    padding:10
    marginLeft:10
    marginRight:10
  lastRow:
    flexDirection:'row'
    padding:10
    marginLeft:10
    marginRight:10
    overflow:'visible'
  cell:
    flex:1
    flexDirection:'row'
  text:
    flex:1
  textContent:
    flex:1
    color:'black'

# styles = StyleSheet.create
#   row:
#     flexDirection:'row'
#     borderWidth:0.3
#     borderStyle:'solid'
#     borderColor:'#CCCCCC'
#     backgroundColor:'#ffffff'
#     padding:10
#     marginLeft:10
#     marginRight:10
#   cell:
#     flex:1
#     flexDirection:'row'
#   text:
#     flex:1
#   textContent:
#     flex:1
#     fontWeight:'bold'


mapStateToProps = (state)->
  modelList:state.page_planDetail.modelList
  isLoading:state.page_planDetail.isLoading
  refreshing:state.page_planDetail.refreshing
  connected:state.appState.connected
  pilotList:state.page_planPilotInfo.collections
  userInfo:state.userInfo
mapDispatchToProps = (dispatch,wonProps)->
  fetchGet:(id)->
    dispatch fetchGetList(id)
  fetchRefresh:(id)->
    dispatch fetchRefreshList(id)

OutDesc = renderAfterTransfer(OutDesc)
module.exports = connect(mapStateToProps,mapDispatchToProps)(OutDesc)
